<template>
  <div>
    <el-table
      :data="state.tableData"
      max-height="300"
      v-loading="state.loading"
      class="customer-table"
      header-cell-class-name="eltablebg"
      style="width: 100%"
    >
      <el-table-column prop="create_time" :label="$t('assets.time')">
        <template #default="r">
          <span>{{ getTimeZoneDate(r.row.create_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop=""
        :label="$t('exchange.tradingPair')"
      >
        <template #default="r">
          <span>{{ r.row.currency_name + "/" + r.row.legal_name }}</span>
          <span>{{
            r.row.transaction_type == 1
              ? $t("exchange.marketPrice")
              : r.row.transaction_type == 2
              ? $t("exchange.limitPrice")
              : $t("exchange.stopLoss")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" :label="$t('exchange.direction')">
        <template #default="r">
          <span
            :class="
              r.row.transaction_direction == 1 ? 'text-green' : 'text-red'
            "
          >
            {{
              r.row.transaction_direction == 1
                ? $t("exchange.buy")
                : $t("exchange.sell")
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="transaction_unit_price"
        :label="$t('exchange.price')"
        ><template #default="r">{{
          $currency(r.row.transaction_unit_price)
        }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="transaction_total_amount"
        :label="$t('assets.amount')"
      >
        <template #default="r">{{
          $currency(r.row.transaction_total_amount)
        }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="transaction_make_amount"
        :label="$t('exchange.dealDone')"
        ><template #default="r">
          <span>{{
            r.row.transaction_make_amount === 0
              ? "--"
              : $currency(r.row.transaction_make_amount)
          }}</span>
        </template></el-table-column
      >
      <el-table-column prop="address" :label="$t('exchange.totalCommission')">
        <template #default="r">
          <span>{{
            $currency(
              rideFix(
                r.row.transaction_unit_price,
                r.row.transaction_total_amount
              )
            )
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="right"
        prop="address"
        :label="$t('assets.operate')"
      >
        <template #default="scope">
          <el-button @click="close(scope.row.id)" type="text" size="small">{{
            $t("assets.revoke")
          }}</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <div>
          <Norecord :useDark="true" />
          <!-- <div class="quotet3 text-12 mb-60 l-10">暂无数据</div> -->
        </div>
      </template>
    </el-table>

    <!-- 撤销弹窗 -->
    <Messagebox
      :text="$t('deal.cancelorder')"
      @oncancer="state.dialog = false"
      :type="3"
      @onconfirm="confirm"
      :dialog="state.dialog"
    />
    <!-- 监听table滚动条触底 -->
    <Tablescroll @scroll="tableScroll" />
  </div>
</template>

<script>
import Norecord from "@/components/noRecord/NoRecord.vue";
import Messagebox from "@/components/messageBox/index.vue";
import { transactionPage, cancelOrderTransaction } from "@/api/currency";
import { democancelOrderTransaction, demotransactionPage } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { computed, onMounted, reactive, watch } from "vue";
import { useStore } from "vuex";
import Tablescroll from "@/components/tablescroll/index.vue";
import { getTimeZoneDate } from "@/utils/times.js";
import { reduceFix, rideFix } from "@/utils/precisionMath.js";

export default {
  name: "CurentCommin",
  components: { Norecord, Messagebox, Tablescroll },
  emits: ["curenttotal", "changeRoke"],
  setup(props, { emit }) {
    const $store = useStore();
    const state = reactive({
      dialog: false,
      tableData: [],
      listParam: {
        page: 0,
        limit: 10,
        currency_match_id: $store.state.exchange.deal_data.id,
      },
      orderId: "", //要撤销的订单id
      loading: false,
      total: 0,
    });
    onMounted(() => {
      getList();
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    const tradingChange = computed(() => {
      return $store.state.exchange.deal_data_id;
    });
    watch(tradingChange, (val) => {
      state.listParam.currency_match_id = val;
      state.listParam.page = 0;
      getList();
    });
    watch(
      () => virtual_wallet.value,
      () => {
        refresh();
      }
    );
    const refresh = () => {
      state.listParam.page = 0;
      getList();
    };
    const getList = () => {
      if (!$store.state.user.token) {
        return;
      }
      let setFun = virtual_wallet.value ? demotransactionPage : transactionPage;
      setFun(state.listParam).then((res) => {
        if (state.listParam.page === 0) {
          state.tableData = res.data.items;
          emit("curenttotal", res.data.total);
        } else {
          state.tableData = state.tableData.concat(res.data.items);
        }
        state.total = res.data.total;
      });
    };
    const confirm = () => {
      state.dialog = false;
      state.loading = false;
      let setFun = virtual_wallet.value
        ? democancelOrderTransaction
        : cancelOrderTransaction;
      setFun(state.orderId)
        .then((res) => {
          if (res.code === 200) {
            state.loading = false;
            state.listParam.page = 0;
            emit("changeRoke");
            getList();
          }
        })
        .catch(() => {
          state.loading = false;
        });
    };
    // table滚动条触底
    const tableScroll = () => {
      if (state.total > state.tableData.length) {
        state.listParam.page = state.listParam.page + 1;
        getList();
      }
    };
    const close = (id) => {
      state.orderId = id;
      state.dialog = true;
    };
    return {
      state,
      close,
      getList,
      confirm,
      tradingChange,
      tableScroll,
      getTimeZoneDate,
      refresh,
      reduceFix,
      rideFix,
    };
  },
};
</script>

<style scoped lang="less">
.close-btn {
  width: 114px;
  height: 30px;
  line-height: 30px;
}
.mb-24 {
  margin-bottom: 24px;
}
</style>
